<template>
	<view>
		<!-- 导航栏 -->
		<scroll-view scroll-x="true" class="top-container" :style="{ height: height+'rpx'}"
			:scroll-into-view=" 'top'+topBarIndex">

			<view :id="'top'+i" class="tab-item" :style="{ fontSize: fontSize+'rpx',padding:itemPadding}"
				v-for="(item,i) in itemNames" :key="i" @tap='changeTab(i)'>

				<text :class='topBarIndex === i? "f-active": "f-inactive" '
					:style="topBarIndex === i?{borderBottomColor:activeColor,color: activeColor}:{}">{{item}}</text>

			</view>
		</scroll-view>

		<!-- 页面内容 -->
		<swiper @change="onChangeTab" :current="topBarIndex" :style="{height: clientHeight+'px'}">
			<swiper-item v-for='(item,index) in itemNames' :key="index">
				<view class=".inner-swiper-item">
					<slot :index="index" :item="item">
					</slot>
				</view>

			</swiper-item>
		</swiper>
	</view>
</template>

/**
* TopBar 顶部导航栏
* @description 导航栏
*/

<script>
	export default {
		name: "my-topbar",
		props: {
			/**
			 * 导航栏的选项名字
			 * item: 
			 * { name , }
			 */
			itemNames: {
				type: Array,
				default: []
			},
			/**
			 * 开始激活的索引
			 */
			beginActiveIndex: {
				type: Number,
				default: 0
			},
			/**
			 * 导航栏高度
			 */
			height: {
				type: Number,
				default: 80
			},
			/**
			 * 选项名称宽度
			 */
			itemPadding: {
				type: String,
				default: "10rpx 30rpx"
			},
			/**
			 * 字体大小
			 */
			fontSize: {
				type: Number,
				default: 36
			},
			/**
			 * 激活颜色
			 */
			activeColor: {
				type: String,
				default: "#ff0000"
			},
			/**
			 * 自定义页面高度，
			 * 建议使用 contextIdPrefix
			 */
			contentHeight: { // 初始化页面高度
				type: Number,
				default: 0
			},

			// /**
			//  *
			//  * 插槽最外层需要设置class名, 
			//  * 然后将其赋值给contextClassName, 
			//  * 以便自动获取页面高度
			//  */
			// contextClassName: {
			// 	type: String,
			// 	default: "inner-swiper-item"
			// },
			/**
			 * id前缀，把每页高度进行设置。
			 * 如果使用默认，
			 * 然后在插槽顶层元素加上 :id=" ‘swiper-item’+ props.index "  ,以便自动获取页面高度
			 */
			idPrefix: {
				type: String,
				default: "swiper-item"
			}
		},
		data() {
			return {
				topBarIndex: 0, //选中的索引
				clientHeight: 0, // 页面高度
				newIdPrefix: '', //新前缀
			};
		},
		mounted() {
			console.log("hello here");
			this.topBarIndex = this.beginActiveIndex
			this.newIdPrefix = this.idPrefix.substr(0, 1) === '#' ? this.idPrefix : '#' + this.idPrefix
			// this.create()
		},

		updated() {
			// console.log("updated");
			this.create()
		},
		methods: {
			create() {
				// console.log("in-here my-topbar");
				this.changeSwiper()
			},
			changeTab(index) {
				if (this.topBarIndex === index) {
					return;
				}
				this.topBarIndex = index;
			},
			onChangeTab(e) {
				this.changeTab(e.detail.current);
				this.changeSwiper();
			},
			changeSwiper() {
				// 如果没指定就自动获取
				if (this.contentHeight === 0) {
					//动态设置swiper的高度，使用nextTick延时设置
					this.$nextTick(() => {
						this.setSwiperHeight();
					});
				} else {
					this.clientHeight = this.contentHeight
				}
			},
			setSwiperHeight() {
				// console.log("in here");
				let element = this.newIdPrefix + this.topBarIndex;
				// console.log(element);
				let query = uni.createSelectorQuery().select(element);
				// console.log(query);
				query.boundingClientRect(data => {
					if (data) {
						// console.log(data);
						this.clientHeight = data.height;
					}
				}).exec();
			},
			refresh() {
				this.$forceUpdate();
				this.$nextTick(() => {
					// DOM已经更新完毕了，执行相应的操作
					this.create()
				});
				// this.create()
			},
			// 过时
			// oldSetSwiperHeight() {
			// 	if (this.contentHeight === 0) {
			// 		// let view = uni.createSelectorQuery().select('.inner-swiper-item')
			// 		const contentClass = this.contextClassName.substr(0, 1) === '.' ? this.contextClassName : '.' + this
			// 			.contextClassName
			// 		let view = uni.createSelectorQuery().select(contentClass)
			// 		view.boundingClientRect(data => {
			// 			// console.log(data.height);
			// 			this.clientHeight = data.height;
			// 		}).exec();
			// 	} else {
			// 		this.clientHeight = this.contentHeight
			// 	}
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.top-container {
		width: 100%;
		// height: 80rpx;
		white-space: nowrap;

		.tab-item {
			display: inline-block;
			// height: fit-content;
			// padding: 10rpx 30rpx;

			// font-size: 36rpx;
			.f-active {
				padding: 10rpx 0;
				color: #ff0000;
				border-bottom: 6rpx solid #ff0000;
			}

			.f-inactive {
				padding: 10rpx 0;
			}
		}
	}

	.inner-swiper-item {
		// display: block;
		// height: auto;
	}
</style>